import { useState } from "react";
import styles from "./RecentHotspots.module.css";

// 导入图片
import img1 from "../common/images/hap1.jpg";
import img2 from "../common/images/hap2.jpg";
import img3 from "../common/images/hap3.jpg";
import img4 from "../common/images/hap4.jpg";
import img5 from "../common/images/hap5.jpg";

// 数据类型定义
interface Festival {
  id: string;
  name: string;
  isHot: boolean;
  templates: Template[];
}

interface Template {
  type: string;
  count: number;
  imageUrl: string;
}

// 模拟数据
const festivals: Festival[] = [
  {
    id: "dragon",
    name: "精选推荐",
    isHot: true,
    templates: [
      {
        type: "端午节海报",
        count: 825,
        imageUrl: img1,
      },
      {
        type: "端午节H5",
        count: 405,
        imageUrl: img2,
      },
      {
        type: "端午节电商模板",
        count: 427,
        imageUrl: img3,
      },
      {
        type: "清新卡通文旅字幕",
        count: 28,
        imageUrl: img4,
      },
      {
        type: "广告全套视觉",
        count: 228,
        imageUrl: img5,
      },
    ],
  },
  {
    id: "children",
    name: "618营销",
    isHot: true,
    templates: [
      {
        type: "618海报",
        count: 569,
        imageUrl: img3,
      },
      {
        type: "618H5",
        count: 332,
        imageUrl: img4,
      },
      {
        type: "直播人物海报",
        count: 301,
        imageUrl: img2,
      },
      {
        type: "红色电商直播间",
        count: 180,
        imageUrl: img1,
      },
      {
        type: "营销促销海报",
        count: 668,
        imageUrl: img5,
      },
    ],
  },
  {
    id: "summer",
    name: "前沿风格",
    isHot: false,
    templates: [
      {
        type: "多巴胺",
        count: 95,
        imageUrl: img4,
      },
      {
        type: "拍立得风",
        count: 90,
        imageUrl: img3,
      },
      {
        type: "玻璃风格电商模板",
        count: 210,
        imageUrl: img5,
      },
      {
        type: "拼图积木风",
        count: 32,
        imageUrl: img1,
      },
      {
        type: "拟人风格电商模板",
        count: 60,
        imageUrl: img2,
      },
    ],
  },
  {
    id: "grain",
    name: "初夏空境",
    isHot: false,
    templates: [
      {
        type: "治愈阳光实拍",
        count: 40,
        imageUrl: img5,
      },
      {
        type: "清新天空实拍",
        count: 40,
        imageUrl: img2,
      },
      {
        type: "生机植物实拍",
        count: 40,
        imageUrl: img3,
      },
      {
        type: "河流潮泊实拍",
        count: 40,
        imageUrl: img4,
      },
      {
        type: "日月星辰实拍",
        count: 36,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "eye",
    name: "图文相册",
    isHot: false,
    templates: [
      {
        type: "党政图文相册模板",
        count: 28,
        imageUrl: img3,
      },
      {
        type: "企业图文相册模板",
        count: 28,
        imageUrl: img5,
      },
      {
        type: "复古图文相册模板",
        count: 32,
        imageUrl: img2,
      },
      {
        type: "温馨图文相册模板",
        count: 24,
        imageUrl: img4,
      },
      {
        type: "科技图文相册模板",
        count: 24,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "gaokao",
    name: "年中办公",
    isHot: true,
    templates: [
      {
        type: "季度分析复盘",
        count: 87,
        imageUrl: img5,
      },
      {
        type: "个人述职竞聘",
        count: 100,
        imageUrl: img3,
      },
      {
        type: "年中工作总结",
        count: 110,
        imageUrl: img1,
      },
      {
        type: "商业策划营销",
        count: 80,
        imageUrl: img4,
      },
      {
        type: "党政精神学习",
        count: 85,
        imageUrl: img2,
      },
    ],
  },
];

export default function Posters() {
  const [selectedFestival, setSelectedFestival] = useState<Festival>(
    festivals[0]
  );
  const [lockSelection, setLockSelection] = useState(false);
  const handleHover = (festival: Festival) => {
    if (!lockSelection) {
      setSelectedFestival(festival);
    }
  };
  const handleClick = (festival: Festival) => {
    setSelectedFestival(festival);
    setLockSelection(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.headerRow}>
        <h2 className={styles.sectionTitle}>聚焦近期热点</h2>
        <p className={styles.sectionDesc}>
          精选热点专题实时更新,热门素材轻松get~
        </p>
        <div className={styles.festivalList}>
          {festivals.map((festival) => (
            <div
              key={festival.id}
              className={`${styles.festivalItem} ${selectedFestival.id === festival.id ? styles.active : ""
                }`}
              onMouseEnter={() => handleHover(festival)}
              onMouseLeave={() => setLockSelection(false)}
              onClick={() => handleClick(festival)}
            >
              <div className={styles.festivalLeft}>
                <span className={styles.festivalName}>{festival.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.templateGallery}>
        <div className={styles.mainImageContainer}>
          {selectedFestival.templates[0] && (
            <div className={styles.mainTemplateCard}>
              <img
                src={selectedFestival.templates[0].imageUrl}
                alt={selectedFestival.templates[0].type}
                className={styles.mainTemplateImage}
              />
              <div className={styles.templateInfo}>
                <h4>{selectedFestival.templates[0].type}</h4>
                <span>共{selectedFestival.templates[0].count}个作品</span>
              </div>
            </div>
          )}
        </div>
        <div className={styles.smallImagesContainer}>
          {selectedFestival.templates.slice(1, 5).map((template) => (
            <div key={template.type} className={styles.smallTemplateCard}>
              <img
                src={template.imageUrl}
                alt={template.type}
                className={styles.smallTemplateImage}
              />
              <div className={styles.templateInfo}>
                <h4>{template.type}</h4>
                <span>共{template.count}个作品</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}